<script setup lang="ts">
import { CircleClose } from '@element-plus/icons-vue';
import dayjs from 'dayjs';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import { ModelValueType } from 'element-plus';
import { computed, ref, unref, watch } from 'vue';
dayjs.extend(isSameOrBefore)
/**
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * ------------------------仅用于选择超长不包含时间的日期区间------------------------
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 */
type ValueType = [string, string] | string
const props = withDefaults(defineProps<{
  modelValue?: ModelValueType,
  type?: 'range' | 'single'
}>(), {
  type: 'range'
})
const emit = defineEmits<{
  (e: 'update:modelValue', v: ModelValueType): void
}>()
const EndInput = ref<HTMLInputElement>()
function dateChange(e: InputEvent, index: 0 | 1) {
  // 处理焦点
  if (e.target !== EndInput.value) {
    unref(EndInput)!.focus()
  }
  const et = e.target as HTMLInputElement
  // 当国际化时,可能会出现时间格式错误
  if (props.type === 'single') {
    emit('update:modelValue', et.value || '')
    return
  }

  let [sd, ed] = props.modelValue as string[]
  // 重新赋值,因为不知道改了谁
  if (!index) {
    sd = et.value
  } else {
    ed = et.value
  }
  // 有一个值不存在,直接按原位置返回
  if (!sd || !ed) {
    emit('update:modelValue', [sd, ed])
    return
  }
  const v = dayjs(ed).isSameOrBefore(dayjs(sd))
  emit('update:modelValue', v ? [ed, sd] : [sd, ed])
}
watch(() => props.type, v => {
  const s = v === "single"
  let tv: string | [string, string] = ''
  if (s) {
    if (Array.isArray(props.modelValue)) {

      tv = props.modelValue.at(1) as string
    } else {
      tv = props.modelValue as string
    }
  } else {
    if (Array.isArray(props.modelValue)) {

      tv = props.modelValue as [string, string]
    } else {
      tv = [props.modelValue as string, '']
    }

  }
  emit('update:modelValue', tv)
}, {
  immediate: true
})

</script>
<template>
  <div class="lang-date-range-choose ">
    <div class="el-date-editor el-input__wrapper" v-if="!Array.isArray(modelValue)">
      <input type="date" @input="(e) => emit('update:modelValue', (e.target as HTMLInputElement).value)"
        :value="modelValue" />
      <span class="el-input__suffix">
        <span class="el-input__suffix-inner">
          <el-icon @click="emit('update:modelValue', '')">
            <CircleClose />
          </el-icon>
        </span>
      </span>
    </div>
    <div class="el-input el-input--suffix" v-else>
      <div class="el-date-editor el-date-editor--daterange el-input__wrapper el-range-editor">
        <input class="el-input__inner" placeholder="choose date" type="date" :value="modelValue[0]"
          @input="(e) => dateChange(e as InputEvent, 0)" />
        <span class="el-range-separator">-</span>
        <input class="el-input__inner" ref="EndInput" placeholder="choose date" type="date" :value="modelValue[1]"
          @input="(e) => dateChange(e as InputEvent, 1)" />
        <span class="el-input__suffix">
          <span class="el-input__suffix-inner">
            <el-icon @click="emit('update:modelValue', ['', ''])">
              <CircleClose />
            </el-icon>
          </span>
        </span>
      </div>
    </div>
  </div>
</template>
<style>
.lang-date-range-choose {
  display: flex;
  width: 20em;
}

.lang-date-range-choose input::placeholder {
  color: var(--el-text-color-placeholder)
}

.lang-date-range-choose .el-range-separator {
  margin: 0 1em;
}

.lang-date-range-choose .el-input__suffix {
  display: none;
}

.lang-date-range-choose:focus-within .el-input__suffix,
.lang-date-range-choose:hover .el-input__suffix {
  display: initial;
}
</style>